<template>
  <div class="container">
    <div class="tabs-lb">
      <!-- <span>认证鉴权</span> -->
      <button v-if="table.data.length < 20" @click="addRow" class="btn_operation_add">
        <img src="~@/assets/img/grzx/add.png" alt />
        新增密钥
      </button>
    </div>
    <div class="table">
      <el-table :data="table.data" style="min-height:550px">
        <!-- <el-table-column
          v-for="item in table.headers"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-link
              v-if="item.prop === 'myzt'"
              :type="scope.row[item.prop] === '已禁用' ? 'danger' : 'success'"
              :underline="false"
              class="myzt"
            >{{ scope.row[item.prop] }}</el-link>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>-->

        <el-table-column prop="ak" label="Access Key" width="340" show-overflow-tooltip>
          <template slot-scope="scope">
            <div style="display:flex">
              <div style="margin-right:10px">{{scope.row.ak}}</div>
              <div class="myfz" @click="copyText(scope.row.ak)">复制</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sk" label="Secret Key" width="340" show-overflow-tooltip>
          <template slot-scope="scope">
            <div style="display:flex">
              <div style="margin-right:10px">{{scope.row.sk1}}</div>
              <div class="myfz" @click="copyText(scope.row.sk)">复制</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="myzt" label="密钥状态" width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-link
              :type="scope.row.myzt === '已禁用' ? 'danger' : 'success'"
              :underline="false"
              class="myzt"
            >{{ scope.row.myzt }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="myms" label="密钥描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="cjsj" label="创建时间" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="cjrymc" label="创建人员名称" width="160" show-overflow-tooltip></el-table-column>

        <el-table-column prop="address" label="操作" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-link type="primary" @click="editorRow(scope.row)">编辑</el-link>
            <el-link v-if="scope.row.myzt === '已禁用'" type="success" @click="qyRow(scope.row)">启用</el-link>
            <el-link v-else type="warning" @click="jyRow(scope.row)">禁用</el-link>
            <el-link type="danger" @click="deleteRow(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page">
      <!-- <span class="text"
          >已创建{{ table.data.length }}个，最多可创建20个</span
      >-->
      <el-pagination
        background
        @size-change="changePageSize"
        @current-change="changePageNum"
        :current-page="params.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="table.total"
      ></el-pagination>
    </div>
    <!-- 新增密钥弹窗 -->
    <add-dialog ref="addDialog" @updateTable="changePageNum(1)" />
  </div>
</template>
<script>
import myglService from "@/api/mygl";
import AddDialog from "./dialogs/add-dialog.vue";
export default {
  components: { AddDialog },
  data() {
    return {
      params: {
        filter: {
          myms: "",
          myzt: "",
        },
        orderBy: "",
        pageNum: 1,
        pageSize: 100,
      },
      table: {
        data: [],
        headers: [
          { label: "Access Key", prop: "ak", width: 340 },
          { label: "Secret Key", prop: "sk", width: 340 },
          { label: "密钥状态", prop: "myzt", width: 100 },
          { label: "密钥描述", prop: "myms" },
          { label: "创建时间", prop: "cjsj", width: 180 },
          { label: "创建人员名称", prop: "cjrymc", width: 160 },
        ],
        total: 0,
      },
    };
  },
  mounted() {
    // 获取安全认证表格
    this.getAqrzList();
  },
  methods: {
    /*
     * 获取安全认证表格
     */
    getAqrzList() {
      const params = this.params;
      myglService
        .queryMy(params)
        .then((res) => {
          console.log(this.table.data);
          this.table.data = res.list || [];
          this.table.total = res.total || 0;
          // console.log(this.table.data);
          this.table.data.forEach((obj) => {
            const sk = obj.sk;
            obj.sk1 = `${sk.slice(0, 4)}${"*".repeat(sk.length - 8)}${sk.slice(
              -4
            )}`;
          });
        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    },

    /*
     * 分页
     */
    changePageNum(val) {
      this.params.pageNum = val;
      this.getAqrzList();
    },

    /*
     * 分页
     */
    changePageSize(val) {
      this.params.pageSize = val;
      this.params.pageNum = 1;
      this.getAqrzList();
    },

    /*
     * 新增
     */
    addRow() {
      this.$refs.addDialog?.openDialog();
    },

    /*
     * 修改
     */
    editorRow(row) {
      this.$refs.addDialog?.openDialog(row);
    },

    /*
     * 删除
     */
    deleteRow(row) {
      this.$confirm("确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const params = {
            ak: row.ak,
          };
          myglService
            .deleteMy(params)
            .then((res) => {
              this.$message.success("删除成功");
              this.getAqrzList();
            })
            .catch((err) => {
              !err.isError &&
                this.$message({ type: "warning", message: err.message });
            });
        })
        .catch(() => { });
    },

    /*
     * 启用
     */
    qyRow(row) {
      const params = {
        ak: row.ak,
      };
      myglService
        .updateMyztqy(params)
        .then((res) => {
          this.$message.success("启用成功");
          this.getAqrzList();
        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    },

    /*
     * 禁用
     */
    jyRow(row) {
      const params = {
        ak: row.ak,
      };
      myglService
        .updateMyztjy(params)
        .then((res) => {
          this.$message.success("禁用成功");
          this.getAqrzList();
        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    },
    copyText(text) {
      let inputDom = document.createElement('textarea') // js创建一个文本框
      document.body.appendChild(inputDom) //将文本框暂时创建到实例里面
      inputDom.value = text //将需要复制的内容赋值到创建的文本框中
      inputDom.select() //选中文本框中的内容
      inputDom.focus()
      document.execCommand('copy') //执行复制操作
      document.body.removeChild(inputDom) //最后移出
      this.$message.success('复制成功')
    }
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  // height: 100%;
  .table {
    width: 100%;
    background: #fff;
    margin-top: 20px;
    // padding-bottom: 20px;
  }
  .page {
    margin-top: 20px;
    text-align: center;
    // position: relative;
    // min-height: 30px;
    // position: absolute;
    // left: 40%;
    // bottom: 5%;
    .text {
      // position: absolute;
      // left: 0;
      background: #eee;
      color: #888;
      padding: 2px 10px;
      border-radius: 5px;
    }
  }
}
.myzt {
  cursor: inherit;
}

.myfz {
  cursor: pointer;
  color: #4084f0;
  text-decoration: underline;
}
</style>
